import React, { useState, useEffect } from 'react';
import {
    BrowserRouter,
    NavLink
} from "react-router-dom"
import Routerview from "./Routerview";
import route from "./config";
import App from "../App";

import { Menu } from 'antd';
import {
    WindowsFilled,
    FundFilled,
    PayCircleFilled,
    EditFilled,
    ProfileFilled,
    PhoneFilled,
    WechatFilled,
} from '@ant-design/icons';

const Router = () => {
    const [path, setPatch] = useState();
    useEffect(() => {
        getter();
    }, [])
    const getter = () => {
        const newpath = JSON.parse(localStorage.getItem("Menu"))
        setPatch(newpath);
    }
    const List = ({ item, key }) => {
        localStorage.setItem("Menu", JSON.stringify(key));
    }
    return (
        <BrowserRouter>
            <div className="top">
                <h2>宏烨找房后台管理系统</h2>
            </div>
            <div className="main">
                <div className="left">
                    {

                        <Menu
                            defaultSelectedKeys={path}
                            mode="inline"
                            theme="dark"
                            onSelect={List}
                        >
                            <Menu.ItemGroup key="" title="管理员">
                            </Menu.ItemGroup>
                            <Menu.Item key="房源管理" icon={<WindowsFilled />}>
                                <NavLink style={{ textDecoration: 'none' }} to='/home'>房源管理</NavLink>
                            </Menu.Item>
                            <Menu.Item key="直播管理" icon={<FundFilled />}>
                                <NavLink style={{ textDecoration: 'none' }} to='/look'>直播管理</NavLink>
                            </Menu.Item>
                            <Menu.Item key="团购管理" icon={<PayCircleFilled />}>
                                <NavLink style={{ textDecoration: 'none' }} to='/group'>团购管理</NavLink>
                            </Menu.Item>
                            <Menu.Item key="审核管理" icon={<EditFilled />}>
                                <NavLink style={{ textDecoration: 'none' }} to='/check'>审核管理</NavLink>
                            </Menu.Item>
                            <Menu.Item key="订单管理" icon={<ProfileFilled />}>
                                <NavLink style={{ textDecoration: 'none' }} to='/indent'>订单管理</NavLink>
                            </Menu.Item>
                            <Menu.Item key="资讯管理" icon={<PhoneFilled />}>
                                <NavLink style={{ textDecoration: 'none' }} to='/information'>资讯管理</NavLink>
                            </Menu.Item>
                            <Menu.Item key="经纪人管理" icon={<WechatFilled />} >
                                <NavLink style={{ textDecoration: 'none' }} to='/broker'>经纪人管理</NavLink>
                            </Menu.Item>
                        </Menu>
                    }
                </div>
                <div className="right">
                    <App>
                        <Routerview routes={route} />
                    </App>
                </div>
            </div>
        </BrowserRouter>
    )
}

export default Router
